<template>
    <div class="time-axis-steps">
        <div class="step-item" v-for="moduleItem in ModuleArr" :key="moduleItem.value.toString()"
            @click="showCurrentModule(moduleItem)">
            <div v-if="!isMultipleModuleIds(moduleItem.value)" class="arrow-container"
                :class="{ 'active': moduleItem.fileNum > 0 }">
                <div class="rectangle"></div>
                <div class="arrow-right"></div>
                <span class="text">{{ moduleItem.name }}</span>
            </div>
            <div v-else class="special">
                <!-- 特殊 -->
                <div class="arrow-container" :class="{ 'active': moduleItem.fileNum && moduleItem.fileNum[index] > 0 }"
                    v-for="(item, index) in moduleItem.name" :key="moduleItem.value[index]" style="margin-bottom: 5px;"
                    @click.stop="showCurrentModule(moduleItem, index)">
                    <div class="rectangle"></div>
                    <div class="arrow-right"></div>
                    <span class="text">{{ item }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { checkType } from '@/utils/common'
export default {
    props: {
        ModuleArr: {
            type: Array,
        }
    },
    computed: {
        isMultipleModuleIds() {
            return (key) => {
                return checkType(key) == 'array'
            }
        },
    },
    methods: {
        showCurrentModule(item, index) {
            if (checkType(item.value) == 'array' && (!index && index != 0)) return
            if (!index && index != 0) return this.$emit('timelineItemClick', item)
            let ModuleObjectKeys = Object.keys(item)
            let obj = {}
            ModuleObjectKeys.forEach(key => {
                obj[key] = item[key][index]
            })
            this.$emit('timelineItemClick', obj)
        }
    }
}
</script>
<style scoped lang="scss">
.time-axis-steps {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    overflow-y: auto;

    .step-item {
        position: relative;
        --arrow-height: 16px;
        --arrow-left-width: 8px;
        --rectangle-width: 156px;
        --arrow-active-color: #004AA5;
        --arrow-color: #e6e6e6;
        width: calc(var(--arrow-left-width) * 2 + var(--rectangle-width));
        // flex: calc(var(--arrow-left-width) * 2 + var(--rectangle-width));
        height: 100%;
        margin: 29px 0;
        font-size: 14px;
        // padding-right: var(--arrow-left-width);

        &:first-of-type {
            .arrow-container {
                .rectangle {
                    border-left: var(--arrow-left-width) solid var(--arrow-color);
                }
            }
        }



        .special {
            // position: absolute;
            // top: 50%;
            transform: translateY(-25%);
        }

        .arrow-container {
            height: 100%;
            position: relative;
            display: flex;
            cursor: pointer;
            color: #333;
            transition: 0.3s;
            width: calc(var(--arrow-left-width) * 3 + var(--rectangle-width));
            // margin-right: calc(var(--arrow-left-width) * -1);
            overflow: hidden;

            &:hover {
                transform: scale(1.2);
                z-index: 999;
            }


            &.active {
                --arrow-color: var(--arrow-active-color);
                color: #fff;
            }
        }

        .rectangle {
            border-top: var(--arrow-height) solid var(--arrow-color);
            border-bottom: var(--arrow-height) solid var(--arrow-color);
            border-right: var(--rectangle-width) solid var(--arrow-color);
            border-left: var(--arrow-left-width) solid transparent;
        }

        .arrow-right {
            position: absolute;
            top: 0;
            right: calc((var(--rectangle-width) - var(--arrow-left-width)) * -1);
            border-top: var(--arrow-height) solid transparent;
            border-bottom: var(--arrow-height) solid transparent;
            border-right: var(--rectangle-width) solid transparent;
            border-left: var(--arrow-left-width) solid var(--arrow-color);
        }

        .text {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 12px;
        }
    }
}
</style>